<template>
	<up-popup :show="modelValue" @close="close">
		<view class="type">
			<scroll-view scroll-y="true" class="type-main border-box">
				<view class="items">
					<view class="item" v-for="item in props.productSkus" :key="item.id">
						<view class="name">{{item.name}}</view>
						<view class="child flex align-item_center wrap">
							<view :class="{'active':false}" v-for="value in item.values" :key="value.id">{{value.name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<u-gap height="20rpx"></u-gap>
			<view class="type-main border-box">
				<view class="items">
					<view class="item flex align-item_center justify-content_space-between">
						<view class="name">数量</view>
						<view class="child flex align-item_center wrap stepsNum">
							<up-number-box v-model="stepNumber"></up-number-box>
						</view>
					</view>
				</view>
			</view>

			<view class="type-confirm">{{props.confirmText}}</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const props = defineProps({
		productSkus: {
			type: Array,
			default: []
		},
		confirmText: {
			type: String,
			default: "加入购物车"
		},
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(["update:modelValue"])

	const state = reactive({
		selectedSku: {}, // 选中的 SKU
		currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
	});

	const onSelectProduct = (item) => {
		console.log(item)
	}

	const stepNumber = ref(0)
	const close = () => {
		emit('update:modelValue', false)
	}
</script>

<style lang="scss" scoped>
	.type-confirm {
		width: 710rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 100rpx;
		background: #A72530;

		font-size: 32rpx;
		font-weight: 400;
		color: rgba(245, 245, 245, 1);
		margin: 46rpx auto 0;
	}

	.type-main {
		padding: 40rpx;
		width: 710rpx;
		max-height: 862rpx;
		border-radius: 8rpx;
		background: #EDE2CD;
		margin: 0 auto;

		.items {

			.item:not(:first-child) {
				margin-top: 42rpx;
			}

			.item {
				.child {
					view {
						margin-top: 20rpx;
						margin-right: 34rpx;
						width: 120rpx;
						height: 48rpx;
						line-height: 48rpx;
						border-radius: 100rpx;
						border: 2rpx solid #A72530;
						text-align: center;

						font-size: 24rpx;
						font-weight: 400;
						color: rgba(167, 37, 48, 1);
					}

					.active {
						background-color: #A72530;
						color: #FFFFFF;
					}
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(64, 3, 3, 1);
				}
			}
		}
	}

	.type {
		background-color: #F8F3E7;
		padding-top: 20rpx;
		padding-bottom: 64rpx;
	}
</style>